<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>tf-graph Demo</title>
    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../hydrogen-join.html">
    <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
    <link rel="import" href="../../../bower_components/paper-slider/paper-slider.html">
  </head>

  <style>
    body {
      font-family: "RobotoDraft","Roboto",sans-serif;
      font-size: 14;
    }
  </style>

  <body unresolved>
    <dom-module id="button-press-counter">
      <style>
        paper-button {
          background-color: #4DB6AC;
          color: white;
        }
      </style>
      <template>
        <paper-button raised on-click="increment"><span>[[count]]<span></paper-button>
      </template>
      <script>
        Polymer({
          is: "button-press-counter",
          properties: {count: {notify: true, value: 0}},
          increment: function() {this.count++;}
        });
      </script>
    </dom-module>

    <dom-module id="args-demo">
      <template>
        <h1>args-demo</h1>
        <button-press-counter count="{{in1}}"></button-press-counter>
        <button-press-counter count="{{in2}}"></button-press-counter>
        <button-press-counter count="{{in3}}"></button-press-counter>
        <hydrogen-join
          in1="[[in1]]"
          in2="[[in2]]"
          in3="[[in3]]"
          out="{{out}}"
          id="argsjoin"
        ></hydrogen-join>
        <p>Output from the hydrogen-join: <span>[[out]]</span></p>
      </template>
      <script>
        Polymer({
          is: "args-demo",
          properties: {
            in1: Number,
            in2: Number,
            in3: Number,
            out: Array,
          },
        });
      </script>
    </dom-module>

    <dom-module id="repeat-demo">
      <style>
        .button {
          padding: 3px;
          margin-bottom: 4px;
          display: inline-block;
        }
      </style>
      <template>
        <h1>repeat-demo</h1>
        <hydrogen-join id="repeatjoin" in-join-property="count" out="{{out}}">
          <template is="dom-repeat" items="[[counters]]">
            <button-press-counter class="button" count="[[item]]"></button-press-counter>
          </template>
        </hydrogen-join>
        <br>
        <p> Move this slider to add/remove buttons. It stays synced! What magic! </p>
        <paper-slider min="0" max="20" value="{{nCounters}}"></paper-slider>
        <p>Output from the hydrogen-join: <span>[[out]]</span></p>
      </template>
      <script>
        Polymer({
          is: "repeat-demo",
          properties: {
            nCounters: {type: Number, value: 10},
            counters: {type: Array, computed: "_makeCounters(nCounters)"},
          },
          _makeCounters: function(nCounters) {
            var c = [];
            for (var i=0; i<nCounters; i++) {
              c.push(i);
            }
            return c;
          }
        });
      </script>
    </dom-module>

    <args-demo id="argsdemo"></args-demo>
    <repeat-demo id="repeatdemo"></repeat-demo>
  </body>
</html>
